<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps for EyeTraffic</title>
        <link rel="stylesheet" type="text/css" href="css/map.css" />
		<link rel="stylesheet" type="text/css" href="extra/map/ewindow/EWindow.css">
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAtEOPihzWueLlNCLMoB9gSRQzovFltyh3__eQzIYnI8zKDV9c-RSnWsxRr2N1XFC9jiUukMEh3_bzxw">
        </script>
        <script type="text/javascript">
            google.load("maps", "2");
            google.load("jquery", "1");
        </script>
		<script src="config.js" type="text/javascript">
        </script>
		<script src="data/cams.js" type="text/javascript">
        </script>
		<script src="lib/util.js" type="text/javascript">
        </script>
		<script src="extra/map/icons.js" type="text/javascript">
        </script>
		<script src="extra/map/more.js" type="text/javascript">
        </script>
        <script src="extra/map/rect.js" type="text/javascript">
        </script>
        <script src="extra/map/elabel.js" type="text/javascript">
        </script>
		<script src="extra/map/ewindow/EWindow.js" type="text/javascript">
        </script>
        <script src="extra/map/canvas.js" type="text/javascript">
        </script>
        <script src="extra/map/cookies.js" type="text/javascript">
        </script>
        <script src="extra/map/geocode.js" type="text/javascript">
        </script>
		<script src="extra/map/gmap.js" type="text/javascript">
        </script>
		<script src="extra/map/ctrl.js" type="text/javascript">
        </script>
		 <script type="text/javascript">
            google.setOnLoadCallback(initialize);
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="location">
                    <span>Address:</span>
                    <input type="text" id="addressSource" value="wasserbillig"/><input type="button" value="Go!" onclick="searchMap();"/><a href="#" class="dirlink" onclick="showRoute();">Get Directions</a>
                </div>
                <div id="route">
                    <div id="routeSourceBox">
                        <span>Home:</span>
                        <input type="text" id="routeA" value="thionville, france"/><a href="#" class="dirlink" onclick="showLocation();">Find Location</a>
                    </div>
                    <div id="routeDestBox">
                        <span>Work:</span>
                        <input type="text" id="routeB" value="kirchberg, luxembourg"/><input type="button" value="Go!" onclick="getRoute();"/><a href="#" onclick="clearRoute();">Clear Route</a>
                    </div>
                </div>
            </div>
			<div id="main">
	            <div id="sidebar" class="left">
	            	<div id="sidebar_cats">
	            	</div>
					<div id="sidebar_route">
	            	</div>
	            </div>
				<div id="center" class="left">
					<div id="map_canvas"style="width:600px;height:500px;">
		            </div>
		            <canvas id="mycanvas" width="1" height="1">
		            </canvas>
					<div id="outer_more"></div>
				</div>
				<div id="right" class="left">
					<div id="catselector">
						<span>Cameras: <input type="checkbox" id="cat_cams" onclick="selcat(this,'cams');" /></span><br/>
						<span>Times: <input type="checkbox" id="cat_times" onclick="selcat(this,'times');" /></span> <br/>
						<span>Current Position: <input type="checkbox" id="cat_position" onclick="selcat(this,'position');" /></span><br/>
						<span>Route: <input type="checkbox" id="cat_route" onclick="selcat(this,'route');" /></span><br/>
						<span>Directions: <input type="checkbox" id="cat_directions" onclick="selcat(this,'directions');" /></span><br/>
				    </div>
					<textarea id="jmarkers" rows="20" cols="50">
            		</textarea>
				</div>
			</div>
            <div id="footer">
                <div id="defloc">
                    <a href="#" onclick="resetLocation();">Reset</a>
                    <a href="#" onclick="saveLocation();">Save</a>
                </div>
                <div id="sizeLinks">
                    <a href="#" onclick="setSize(0);">Small</a>
                    <a href="#" onclick="setSize(1);">Medium</a>
                    <a href="#" onclick="setSize(2);">Large</a>
                    <!--a href="#" onclick="setSize(3);">ExtraLarge</a-->
                </div>
            </div>
        </div>
    </body>
</html>
